<template>
  <div class="workflow_notice">
    <div class="workflow_notice_inner" v-for="(item, index) in inputList" :key="item.id" >
        <workflow-input class="workflow_notice_input"
            v-model="item.value" 
            :output="output"
            @change="handleInputChange"
        ></workflow-input>
        <a-icon class="input_delete" v-if="index !== 0" @click="() => handleDelete(item)" type="close" />
    </div>
    <a-button @click="handleAddClick"> 添加输入框 </a-button>
  </div>
</template>

<script>
import WorkflowInput from './workflowInput.vue';
import { uuid } from '@/utils/utils';
export default {
	props: {
		value: {
            type: String,
			default: ""
		},
		noticeData: String,
		output: {
            type: Array,
			default: []
		},
	},
    components:{
        WorkflowInput
    },
	data(){
		return{
            inputList: [
                {
                    value: '',
                    id: uuid()
                }
            ]
		}
	},
	methods:{
        handleAddClick(){
            this.inputList.push({
                value: '',
                id: uuid()
            })
        },
        handleDelete(item){
            this.inputList = this.inputList.filter(i => i.id !== item.id)
            this.handleInputChange()
        },
        handleInputChange(){
            let value = ''
            let splitvalue = ''
            this.inputList.forEach(input => {
                value += input.value
            })
            this.inputList.forEach((input, index) => {
                if(index === 0){
                   splitvalue += input.value
                } else {
                    splitvalue += '_&*^*&_' + input.value 
                }
            })
			this.$emit('input',value);
			this.$emit('change',splitvalue);
        },
	},
  mounted(){
    if(this.noticeData){
        let data = this.noticeData.split('_&*^*&_')
        let list = []
        data.forEach(d => {
            list.push({
                value: d,
                id: uuid()
            })
        })
        this.inputList = list
    }
  },
  computed:{
  }
}

</script>

<style lang="less">
.workflow_notice_inner{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .workflow_notice_input{
        flex: 1 1 auto;
    }

    .input_delete{
        cursor: pointer;
        margin-left: 10px;
    }
    
}
</style>